<template>
	<view>
		<cu-custom :isBack="true" :bgColor="'bg-black'" :backColor="'text-white'">
			<block slot="backText">
				<view class="text-white ">
					门店信息
				</view>
			</block>
		</cu-custom>
		<view class="bg-white padding">
			<scroll-view scroll-x class="nav">
				<view class="cu-item flex-sub" :class="index==TabCur?'text-black,cur':''"
					v-for="(item,index) in ['门店信息修改','背景图','最新情报']" :key="index" @click="tabSelect" :data-id="index">
					{{item}}
				</view>
			</scroll-view>
		</view>
		<view v-show="TabCur==0">
			<van-cell-group>
				<van-field type="textarea" size="large" autosize :value="shopName" @input="shopName=$event.detail"
					label="店铺名称" placeholder="店铺招牌上的名称,长度1-10个字" required maxlength="10" />
				<van-field :value="phone" @input="phone=$event.detail" size="large" label="联系电话"
					placeholder="可联系店铺的手机号" required :border="false"  readonly >
					<van-button slot="button" size="small" type="primary" @click="newPhoneShow=true">
					      修改
					</van-button>
				</van-field>
				<van-field :value="code" @input="code=$event.detail" size="large" label="验证码"
					placeholder="验证码" required :border="false" >
					<van-button slot="button" size="small" type="primary" @click="smsStatus===0?sms(phone):$textToast(smsStatus+'s后再试')" >
					      {{smsStatus==0?'发送验证码':smsStatus+'s'}}
					    </van-button>
					</van-field>
				<van-popup :show="newPhoneShow" round  @colse="newPhoneShow=false" @click-overlay="newPhoneShow=false">
					<view style="width: 600rpx;" class="padding">
						<van-field :value="newPhone" @input="newPhone=$event.detail" size="large" label="新联系电话"
							placeholder="可联系店铺的手机号" required :border="false" />
						<van-field :value="newCode" @input="newCode=$event.detail" size="large" label="验证码"
							placeholder="验证码" required :border="false" >
							<van-button slot="button" size="small" type="primary"  @click="smsNewStatus===0?sms(newPhone):$textToast(smsNewStatus+'s后再试')">
							      {{smsNewStatus==0?'发送验证码':smsNewStatus+'s'}}
							    </van-button>
						</van-field>
						<view >
							<button @click="newPhoneShow=false" class="cu-btn block bg-black margin-tb-sm lg" > 确定</button>
						</view>
					</view>
				</van-popup>
				<van-field v-show="!newPhoneShow&&newPhone!=''" :value="newPhone"  size="large" label="新联系电话"
					placeholder="可联系店铺的手机号" required :border="false" readonly />
				<van-field :value="weixin" @input="weixin=$event.detail" size="large" label="联系微信号"
					placeholder="可联系店铺的微信号" required :border="false" />
				<view class="" @click="show=true">
					<van-field :value="Location" size="large" label="省市区" placeholder="请选择省市区" required is-link readonly
						:border="false" :arrow-direction="show?'down':''" />
				</view>
				<view @click="getLocation">
					<van-field :value="address" size="large" label="具体地址" placeholder="请先选择具体地址" is-link readonly
						required :border="false" />
				</view>
				<van-field :value="address1" @input="address1=$event.detail" v-show="address1Show" size="large" label="街道门牌号"
					placeholder="填写具体街道门牌号" required :border="false" />
				<view class="cu-bar bg-white margin-top">
					<view class="action">
						<text class="text-red">* </text>营业执照上传
					</view>
					<view class="action">
						<!-- {{imgList.length}}/1 -->
					</view>
				</view>
				<view class="cu-form-group">
					<view class="grid col-4 grid-square flex-sub">
						<view class="bg-img" @click="ViewImage" :data-url="$isHttp(yyzz)" v-if="yyzz!=''">
							<image :src="$isHttp(yyzz)" mode="aspectFill"></image>
							<view class="cu-tag bg-red" @click.stop="DelImg" :data-index="1">
								<text class='cuIcon-close'></text>
							</view>
						</view>
						<view class="solids" @click="ChooseImage(1)" v-if="yyzz==''">
							<text class='cuIcon-cameraadd'></text>
						</view>
					</view>
				</view>
				<view class="cu-bar bg-white margin-top">
					<view class="action">
						<text class="text-red">* </text>头像logo
					</view>
					<view class="action">
						<!-- {{imgList.length}}/1 -->
					</view>
				</view>
				<view class="cu-form-group">
					<view class="grid col-4 grid-square flex-sub">
						<view class="bg-img" @click="ViewImage" :data-url="$isHttp(logo)" v-if="logo!=''">
							<image :src="$isHttp(logo)" mode="aspectFill"></image>
							<view class="cu-tag bg-red" @click.stop="DelImg" :data-index="0">
								<text class='cuIcon-close'></text>
							</view>
						</view>
						<view class="solids" @click="ChooseImage(0)" v-if="logo==''">
							<text class='cuIcon-cameraadd'></text>
						</view>
					</view>
				</view>
			</van-cell-group>

			<view class="padding-xl">
				<button @click="submit" class="cu-btn block bg-black margin-tb-sm lg" :loading="false"> 提交修改</button>
			</view>

		</view>

		<view v-show="TabCur==1" class="text-center bg-white">
			<van-cell-group>
				<view class="cu-bar bg-white margin-top">
					<view class="action">
						<text class="text-red">* </text>选择店铺背景图
					</view>
					<view class="action">
						<!-- {{imgList.length}}/1 -->
					</view>
				</view>
				<!-- <view class="cu-form-group">
					<view class="grid col-2 grid-square flex-sub">
						<view class="" @click="ViewImage" :data-url="$isHttp(bgm)" v-if="bgm!=''">
							<image :src="$isHttp(bgm)" mode="aspectFill"></image>
							<view class="cu-tag bg-red" @click.stop="DelImg" :data-index="5">
								<text class='cuIcon-close'></text>
							</view>
						</view>
						<view class="solids" @click="ChooseImage(5)" v-if="bgm==''">
							<text class='cuIcon-cameraadd'></text>
						</view>
					</view>
				</view> -->
			</van-cell-group>
			<view class="flex justify-start flex-wrap">
				<view v-for="(item,index) in bgList" :key="index" class="" style="flex: 0 0 33%;position: relative;" @click="bgm=item.picture">
					<image :src="$isHttp(item.picture)" mode="" style="width: 200rpx;height: 300rpx;border: 1px solid #000;"></image>
					<view v-if="bgm==item.picture" style="position: absolute;top: 0;left: 50%;transform: translateX(-50%);background-color: #000000;color: #FFFBE8;">当前背景</view>
				</view>
			</view>
			<view class="padding-xl">
				<button @click="submit1" class="cu-btn block bg-black margin-tb-sm lg" :loading="false"> 提交</button>
			</view>
		</view>

		<view v-show="TabCur==2" class="text-center bg-white">
			<van-cell-group>
				<van-field type="textarea" size="large" autosize :value="information" @input="information=$event.detail"
					label="最新情报" placeholder="最新情报" required maxlength="20" />
			</van-cell-group>
			<view class="padding-xl">
				<button @click="submit1" class="cu-btn block bg-black margin-tb-sm lg" :loading="false"> 提交</button>
			</view>
		</view>
		<van-popup :show="show" position="bottom" round close-on-click-overlay>
			<van-area :area-list="areaList" @confirm="areaConfirm" @cancel="show=false" />
		</van-popup>
	</view>
</template>

<script>
	import area from "../../common/area.js"
	import {
		baseUrl
	} from "../../initial.js"
	import {
		validate,
		string,
		util,
		isValid
	} from 'valid.js'
	export default {
		data() {
			return {
				TabCur: 0,

				show: false,
				address1Show:false,
				newPhoneShow:false,
				timer1:null,
				smsStatus:0,
				timer2:null,
				smsNewStatus:0,

				areaList: area,

				shopName: '',
				phone: '',
				code:'',
				newPhone:'',
				newCode:'',
				weixin: '',

				Location: '',
				province: '',
				city: '',
				area: '',
				address: '',
				latitude:'',
				longitude:'',
				address1: '',
				yyzz: '',
				logo: '',

				bgm: '',
				information: '',
				
				bgList:[],
			};
		},
		watch:{
			address:function(newVal,oldVal){
				if(oldVal!=='' && newVal!==oldVal){
					this.address1Show=true
				}
			}
		},
		onLoad() {
			this.$u.adminApi.getStoreInfo({
				storeId: this.vuex_bussinessId
			}).then(res => {
				this.shopName = res.data.store_name
				this.phone = res.data.telephone
				this.weixin = res.data.wechat_number
				this.Location = res.data.province + res.data.city + res.data.region
				this.province = res.data.province
				this.city = res.data.city
				this.area = res.data.region
				this.address = res.data.address
				this.yyzz = res.data.licenseImgUrl
				this.logo = res.data.picture
				this.latitude=res.data.latitude
				this.longitude=res.data.longitude
				
				this.bgm = res.data.background
				this.information = res.data.information
			})
			this.$u.adminApi.getSystemPicture().then(res=>{
				if(res.code===200){
					this.bgList=res.data
				}
			})
		},
		methods: {
			submit() {
				if (!isValid(this.shopName, [string.length(1, 10), util.isRequired])) {
					this.$textToast('店铺名称不符合要求')
					return
				}
				if (!this.checkTel(this.phone)) {
					this.$textToast('电话号码不合法')
					return
				}
				if (!isValid(this.weixin, [util.isRequired])) {
					this.$textToast('微信号必填')
					return
				}
				if (!isValid(this.Location, [util.isRequired])) {
					this.$textToast('请选择省市区')
					return
				}
				if (!isValid(this.address, [util.isRequired])) {
					this.$textToast('请选择具体地址')
					return
				}
				if (!isValid(this.address1, [util.isRequired]) && this.address1Show) {
					this.$textToast('请填写街道门牌号')
					return
				}
				if (!isValid(this.yyzz, [util.isRequired])) {
					this.$textToast('请上传营业执照')
					return
				}
				this.$u.adminApi.updateStoreInfo({
					storeId: this.vuex_bussinessId,
					storeName: this.shopName,
					licenseImgUrl: this.yyzz,
					telephone: this.newPhone,
					code:this.newCode,
					telephone1: this.phone,
					code1:this.code,
					wechat_number: this.weixin,
					province: this.province,
					city: this.city,
					region: this.area,
					address: this.address + this.address1,
					latitude:this.latitude,
					longitude:this.longitude,
					picture: this.logo
				}).then(res => {
					if (res.code === 200) {
						this.$successToast('修改成功')
					}
				})
			},
			submit1() {
				this.$u.adminApi.updateStoreBgInfo({
					storeId: this.vuex_bussinessId,
					background: this.bgm,
					information: this.information,
				}).then(res => {
					if (res.code === 200) {
						this.$successToast('成功')
					}
				})
			},
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			},
			areaConfirm(e) {
				this.show = false
				this.Location = e.detail.values[0].name + e.detail.values[1].name + e.detail.values[2].name
				this.province = e.detail.values[0].name
				this.city = e.detail.values[1].name
				this.area = e.detail.values[2].name
			},
			getLocation() {
				let _this = this
				uni.chooseLocation({
					success: function(res) {
						_this.address = res.name
						_this.latitude=res.latitude
						_this.longitude=res.longitude
						// console.log('位置名称：' + res.name);
						// console.log('详细地址：' + res.address);
						// console.log('纬度：' + res.latitude);
						// console.log('经度：' + res.longitude);
					}
				});
			},
			ChooseImage(index) {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: (res) => {
						uni.uploadFile({
							url: baseUrl + '/store/upload', //仅为示例，非真实的接口地址
							filePath: res.tempFilePaths[0],
							name: 'file',
							header: {
								Authorization: 'Bearer ' + this.vuex_token
							},
							formData: {
								select: index
							},
							success: (uploadFileRes) => {
								switch (index) {
									case 0:
										this.logo = JSON.parse(uploadFileRes.data).data
										break;
									case 1:
										this.yyzz = JSON.parse(uploadFileRes.data).data
										break;
									case 2:
										// 代码块
										break;
									case 3:
										// 代码块
										break;
									case 4:
										// 代码块
										break;
									case 5:
										this.bgm = JSON.parse(uploadFileRes.data).data
										break;
									default:
										// 默认代码块
								}
							}
						});
					}
				});
			},
			ViewImage(e) {
				uni.previewImage({
					urls: this.imgList,
					current: e.currentTarget.dataset.url
				});
			},
			DelImg(e) {
				uni.showModal({
					title: '提示',
					content: '确定要删除吗？',
					cancelText: '再看看',
					confirmText: '再见',
					success: res => {
						if (res.confirm) {
							switch (e.currentTarget.dataset.index) {
								case 0:
									this.logo = ''
									break;
								case 1:
									this.yyzz = ''
									break;
								case 2:
									// 代码块
									break;
								case 3:
									// 代码块
									break;
								case 4:
									// 代码块
									break;
								case 5:
									this.bgm = ''
									break;
								default:
									// 默认代码块
							}
						}
					}
				})
			},
			checkTel(value) {
				var isPhone = /^([0-9]{3,4}-)?[0-9]{7,8}$/;
				var isMob = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/;
				if (isMob.test(value) || isPhone.test(value)) {
					return true;
				} else {
					return false;
				}
			},
			sms(phone){
				this.$u.adminApi.sms({
					number:phone,
					select:1
				}).then(res=>{
					if(res.code===200){
						if(phone==this.phone){
							const TIME_COUNT = 60;
							if (!this.timer1) {
								this.smsStatus = TIME_COUNT;
								this.timer1 = setInterval(() => {
									if (this.smsStatus > 0 && this.smsStatus <= TIME_COUNT) {
										this.smsStatus--;
									} else {
										clearInterval(this.timer1);
										this.timer1 = null;
									}
								}, 1000);
							}
						}
						if(phone==this.newPhone){
							const TIME_COUNT = 60;
							if (!this.timer2) {
								this.smsNewStatus = TIME_COUNT;
								this.timer2 = setInterval(() => {
									if (this.smsNewStatus > 0 && this.smsNewStatus <= TIME_COUNT) {
										this.smsNewStatus--;
									} else {
										clearInterval(this.timer2);
										this.timer2 = null;
									}
								}, 1000);
							}
						}
						this.$textToast(res.message)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>

</style>
